import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import { Button } from '@fe-workspace/example-package';
import './index.css';

const Home: React.FC = () => (
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the example React application!</p>
    <Button variant="primary">Primary Button</Button>
    <Button variant="secondary" style={{ marginLeft: '10px' }}>Secondary Button</Button>
  </div>
);

const About: React.FC = () => (
  <div>
    <h1>About Page</h1>
    <p>This is a simple example app using React and React Router.</p>
    <Button variant="primary">Click Me</Button>
  </div>
);

const App: React.FC = () => {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};

export default App;
